{% extends 'base/base.html' %}
{% load static %}

{% block Title %}修改密码{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/user-styles.css' %}">
{% endblock %}

{% block main %}
<div class="user-center">
    <div class="center-container">
        <div class="center-header">
            <h1>🔒 修改密码</h1>
            <p>为了您的账户安全，请定期更新密码</p>
        </div>

        <form action="" method="post" class="password-form">
         {% csrf_token %}
            <div class="form-group">
                <label for="id_old_password">当前密码</label>
                <input type="password" name="old_password" id="id_old_password" class="form-control" placeholder="请输入当前密码" required>
                {% if form.old_password.errors %}
                    {% for error in form.old_password.errors  %}
                        <p class="text-danger">{{ error }}</p>
                    {% endfor %}
                {% endif %}
            </div>
            <div class="form-group">
                <label for="id_password">新密码</label>
                <input type="password" name="password" id="id_password" class="form-control" placeholder="请输入新密码" required>
                <div class="password-strength">
                    <div class="password-strength-bar"></div>
                </div>
                {% if form.password.errors %}
                    {% for error in form.password.errors  %}
                        <p class="text-danger">{{ error }}</p>
                    {% endfor %}
                {% endif %}
            </div>
            <div class="form-group">
                <label for="id_password2">确认新密码</label>
                <input type="password" name="password2" id="id_password2" class="form-control" placeholder="请再次输入新密码" required>
                {% if form.password2.errors %}
                    {% for error in form.password2.errors  %}
                        <p class="text-danger">{{ error }}</p>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="auth-buttons">
                <button type="submit" class="btn-primary">💾 确认修改</button>
                <a href="{% url 'user:center' %}" class="btn-secondary">🔙 返回个人中心</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
// 密码强度检测
document.getElementById('id_password').addEventListener('input', function() {
    const password = this.value;
    const strengthBar = document.querySelector('.password-strength-bar');
    const strengthContainer = document.querySelector('.password-strength');
    
    let strength = 0;
    if (password.length >= 6) strength++;
    if (password.match(/[a-z]/)) strength++;
    if (password.match(/[A-Z]/)) strength++;
    if (password.match(/[0-9]/)) strength++;
    if (password.match(/[^a-zA-Z0-9]/)) strength++;
    
    strengthContainer.className = 'password-strength';
    if (strength <= 2) {
        strengthContainer.classList.add('weak');
    } else if (strength <= 3) {
        strengthContainer.classList.add('medium');
    } else {
        strengthContainer.classList.add('strong');
    }
});

// 密码确认验证
document.getElementById('id_password2').addEventListener('input', function() {
    const password = document.getElementById('id_password').value;
    const password2 = this.value;
    const formGroup = this.closest('.form-group');
    
    if (password2 && password !== password2) {
        formGroup.classList.add('error');
        if (!formGroup.querySelector('.password-match-error')) {
            const errorDiv = document.createElement('p');
            errorDiv.className = 'text-danger password-match-error';
            errorDiv.textContent = '两次输入的密码不一致';
            formGroup.appendChild(errorDiv);
        }
    } else {
        formGroup.classList.remove('error');
        const errorDiv = formGroup.querySelector('.password-match-error');
        if (errorDiv) {
            errorDiv.remove();
        }
    }
});
</script>
{% endblock %}